<template>
  <div class="topic">
    <div class="zhuanti">
      <div class="box" v-for="item in topicData">
        <img :src="item.scene_pic_url"  alt="" width="100%"/>
        <div class="title">
          {{item.title}}
        </div>
        <div class="tip">
          {{item.subtitle}}
        </div>
        <div class="price">
          {{item.price_info | RMBformat }}
        </div>
      </div>

      <van-pagination v-model="currentPage" :page-count="2" mode="simple" @change="clickPaginaton"/>



    </div>


  </div>
</template>

<script>
import { getTopicList } from '@/request/api'

export default {
  name: 'Topic',
  data () {
    return {
      topicData:[],   //专题数据
      currentPage:1,
      page:1,
      size:10,

    }
  },
  created () {
    this.getTopicListData(this.page,this.size)
  },
  computed: {},
  methods: {
    // 获取专题数据
    getTopicListData(page,size){
      getTopicList({
        page:page,
        size:size
        }
      ).then(res=>{
        this.topicData=res.data.data
        document.body.scrollTop = 0;
        document.documentElement.scrollTop = 0;
      })
    },
    clickPaginaton(){

      // loding加载弹窗
      this.$toast.loading({
        message: '加载中...',
        forbidClick: true,
        duration:500
      });

      // 延迟响应
      setTimeout(()=>{
        // 跳转到用户页面
        this.getTopicListData(this.currentPage,this.size)

      },500)

    }
  }
}
</script>

<style lang="less" scoped>
*{
  padding: 0;
  margin: 0;
}
.topic{
  font-size: .18rem;
  font-family: '黑体';


}
.zhuanti{

  padding-bottom: 100px;
  background-color: rgb(239,239,239);
}

.box{
    background-color: #fff;
    text-align: center;
    padding-bottom: 10px;
    margin-bottom: 20px;
    .title{
      font-size: 18px;
      margin: 10px 0;
    }
    .tip{
      font-size: 16px;
      margin: 20px 0;
      color: #1f1f1f;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 1;
      -webkit-box-orient: vertical;
    }
    .price{
      margin-bottom: 10px;
      color: darkred;
      font-size: 14px;
    }
  }


.van-pagination{
  display: flex;
  font-size: 14px;
  /deep/.van-pagination__item{
    color: #333;
  }

  /deep/.van-pagination__page-desc{
    display: none;
  }
  /deep/.van-pagination__next{
    color: darkred;
  }
}

</style>
